<template>
<!-- 商品管理 -->
  <div id="Shop" class="Shop">
    <h1>
      商品管理
      <el-button type="primary" class="btn el-icon-plus">添加商品</el-button>
    </h1>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="formInline.region" placeholder="查询类型">
          <el-option label="按ID号查询" value="shanghai"></el-option>
          <el-option label="按信息查询" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.user" placeholder></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" style="background:#fff;color:black">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="Shoplist" border style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="信息"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="status" label="状态">
        在售
        <el-button type="warning" style="color:#fff">下架</el-button>
      </el-table-column>
      <el-table-column label="操作">
        <span class="gai" @click="goSee">查看</span>
        <span class="gai" @click="goEdit">编辑</span>
      </el-table-column>
    </el-table>
    <paging :total="total" @sorter="handleCurrentChange"></paging>
  </div>
</template>

<script>
import { Shoplist } from "@/request/http";
import { Shoppage } from "@/request/http";
import { Shopsearch } from "@/request/http";
import paging from "@/pages/home/components/paging";

export default {
  props: [],
  name: "Shop",
  data() {
    return {
      Shoplist: [],
      pageNum: 1,
      total: 5,
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  created() {},
  computed: {},
  components: {
    paging,
  },
  methods: {
    onSubmit() {
      Shopsearch.then((data) => {
        console.log(data);
      });
    },
    // page分页功能
    handleCurrentChange(val) {
      Shoppage(val).then((data) => {
        // console.log(data.data);
        this.Shoplist = data.data.data.list;
        console.log(this.Shoplist);
      });
    },
    // 跳转到修改页面
    goEdit() {
      this.$router.push("/edit");
    },
    goSee() {
      this.$router.push("/see");
    },
  },
  mounted() {
    // 页面进入时加载内容
    Shoplist.then((data) => {
      // console.log(data.data);
      if (data.data.status == 0) {
        this.Shoplist = data.data.data.list;
        // console.log(this.Shoplist);
        this.total = data.data.data.total;
      }
    });
  },
  watch: {
    // 监测变化
  },
};
</script>
<style scoped lang="scss">
.Shop {
  .gai {
    color: rgb(144, 192, 219);
    margin-left: 10px;
  }
}
h1 {
  font-size: 60px;
  padding: 40px;
  display: flex;
}
.btn {
  font-size: 20px;
  margin-left: 900px;
  border: 1px solid #ffffff;
}
</style>